import { Demo3Component } from './demo3/demo3.component';
import { Demo5Component } from './demo5/demo5.component';
import { BasicComponent } from './basic/basic.component';
import { CallbackAndRouterComponent } from './callback-and-router/callback-and-router.component';
import { GroupComponent } from './group/group.component';
import { MultipleLevelComponent } from './multiple-level/multiple-level.component';
import { SizeComponent } from './size/size.component';
import { PositionComponent } from './position/position.component';

export const DropdownConfig = {
  location: 'Dropdown',
  description: '下拉菜单是界面中通过点击、划过等操作，扩展的一个可操作的菜单组。',
  description_en: 'Dropdown menu is an operable menu group expanded by click, hover and other operations in the interface.',
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/dropdown/basic/basic.component',
      demoTitle: '基础下拉菜单',
      demoTitle_en: 'Basic drop-down menu',
      demoDescription: '下拉菜单可应用于任何触发点，支持点击和划过两种触发事件 。',
      demoDescription_en: 'Dropdown can be applied to any trigger point, and supports two kinds of trigger events: click and hover.',
    },
    {
      demo: SizeComponent,
      codePath: 'showcase/dropdown/size/size.component',
      demoTitle: '下拉菜单尺寸',
      demoTitle_en: 'Drop-down menu size',
      demoDescription:
        '下拉菜单根据不同场景尺寸不同，当场景空间较充足，为保证效果使用单项高度40px，当场景空间较小，为节省空间，使用单项高度32px。',
      demoDescription_en:
        'The drop-down list varies according to the scenario size. When the scene space is sufficient, use the single-item height 40px to ensure the effect. When the scene space is small, use the single-item height 32px to save space.',
    },
    {
      demo: PositionComponent,
      codePath: 'showcase/dropdown/position/position.component',
      demoTitle: '弹出位置',
      demoTitle_en: 'Position',
      demoDescription: '支持 6 个弹出位置，当配置的默认位置不适合时，自动调整。',
      demoDescription_en: 'Six positions are supported. Automatic adjustment occurs when configured default position is not suitable.',
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/dropdown/demo3/demo3.component',
      demoTitle: '菜单项自定义',
      demoTitle_en: 'MenuItem Customization',
      demoDescription: '可以进行全局的自定义，也可以对单个菜单项进行自定义。',
      demoDescription_en: 'Menu items can be customized globally or individually.',
    },
    {
      demo: GroupComponent,
      codePath: 'showcase/dropdown/group/group.component',
      demoTitle: '选项分组',
      demoTitle_en: 'Option grouping',
      demoDescription: `对于选项或者操作含义明确，只是需要对不同选项或者操作进行划分时；或者分类不好归纳时；或者对于需要通过标题明确选项或者操作含义时。`,
      demoDescription_en: `For options or operations that have clear meanings, it is only necessary to divide different options or operations; or when the classification is not easy to summarize; or when it is necessary to clarify the meaning of options or operations through titles.`,
    },
    {
      demo: MultipleLevelComponent,
      codePath: 'showcase/dropdown/multiple-level/multiple-level.component',
      demoTitle: '多层级下拉',
      demoTitle_en: 'Multi-level Dropdown',
      demoDescription: '下拉菜单有多个层级。',
      demoDescription_en: 'The dropdown menu has multiple levels.',
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/dropdown/demo5/demo5.component',
      demoTitle: '右键菜单',
      demoTitle_en: 'Contextmenu',
      demoDescription: '在指定区域内使用右键菜单。',
      demoDescription_en: 'Contextmenu can be applied at specified location.',
    },
    {
      demo: CallbackAndRouterComponent,
      codePath: 'showcase/dropdown/callback-and-router/callback-and-router.component',
      demoTitle: '事件回调和路由',
      demoTitle_en: 'Event and Route',
      demoDescription: '可配置路由或回调函数来响应菜单点击事件。',
      demoDescription_en: 'Route or callback functions can be configured to respond to menu click events.',
    },
  ],
  useRule: [],
  useSuggestion: [],
  selector: 'lv-dropdown',
  snippet: `<button lv-button lv-dropdown [lvDropdownMenus]="\${1:menus}" [lvDropdownTrigger]="\${2:'hover'}">\${3:Dropdown}</button>`,
  api: [
    {
      attribute: 'lvDropdownMenus',
      type: 'MenuItem[]',
      default: 'null',
      description: `菜单定义，类型为MenuItem数组，MenuItem 属性如下：
      <ul>
        <li>[id: string] 菜单项ID，具有唯一性 (必选)</li>
        <li>[label: string | TemplateRef] 菜单项显示的名称 (必选)</li>
        <li>[title: string | TemplateRef] 菜单项的分组名称 (可选)</li>
        <li>[tips: string] 鼠标滑过时，显示的提示信息 (可选)</li>
        <li>[icon: string] 菜单项的图标 (可选)</li>
        <li>[divide: boolean] 配置后，在菜单的下方出现分隔线 (可选)</li>
        <li>[onClick: void] 菜单项的左键单击事件的回调函数，(data) => {} (可选)</li>
        <li>[routerLink: LvRouterLinkType] 路由配置，菜单项左键单击触发，如 '/a'、['/a']、[['/a'], {queryParams: {id: 1}}] (可选)</li>
        <li>[items: MenuItem[]] 菜单项的子菜单定义 (可选)</li>
        <li>[expanded: boolean] 菜单项是否展开，默认值 false (可选)</li>
        <li>[disabled: boolean] 菜单项是否禁用，默认值 false (可选)</li>
        <li>[hidden: boolean] 菜单项是否隐藏，默认值 false (可选)</li>
      </ul>
      `,
      description_en: `Menu definition. Type is MenuItem array, and the properties of MenuItem are as follows:
			      <ul>
			  <li>[id: string] Menu item ID, unique (required)</li>
			  <li>[label: string | TemplateRef] Name that menu item displays (required)</li>
			  <li>[tips: string] Prompt information displayed when mouse is over (optional)</li>
			  <li>[icon: string] Icon of menu item (optional)</li>
			  <li>[divide: boolean] Dividing line which appears at the bottom of the menu after configuration(optional)</li>
			  <li>[onClick: void] Callback function for left-click event of the menu item, (data) => {} (optional)</li>
			  <li>[routerLink: LvRouterLinkType] Route configuration, triggered by left-click on the menu item (optional), exp：'/a'、['/a']、['/a', {queryParams: {id: 1}}]</li>
			  <li>[items: MenuItem[]] Submenu definition of the menu item (optional)</li>
			  <li>[expanded: boolean] Whether to expand the menu item. The default value is false (optional)</li>
			  <li>[disabled: boolean] Whether to disable the menu item. The default value is false (optional)</li>
			  <li>[hidden: boolean] Whether to hide the menu item. The default value is false (optional)</li>
			</ul>
			`,
    },
    {
      attribute: 'lvDropdownLabelTemplate',
      type: 'TemplateRef',
      default: 'null',
      description: `下拉菜单项的 label 自定义模板，该模板对所有菜单项有效。`,
      description_en: `Customized Label template of the drop-down menu, which is valid for all menu items.`,
    },
    {
      attribute: 'lvDropdownTrigger',
      type: 'click | hover | contextmenu',
      default: 'click',
      description: `触发下拉菜单的事件类型，默认为左键点击 'click'。`,
      description_en: `Types of events triggering the drop-down menu, which is left-click by default.`,
    },
    {
      attribute: 'lvDropdownPosition',
      type: 'topLeft | topCenter | topRight | bottomLeft | bottomCenter | bottomRight',
      default: 'lb',
      description: `下拉菜单基于触发点的位置 ('topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight')，默认为触发点的左下方。备注：右键菜单模式不生效。`,
      description_en: `The drop-down menu is based on the location of trigger points ('topLeft ' | 'topCenter' | 'topRight ' | 'bottomLeft' | 'bottomCenter ' | 'bottomRight'), and it is located at the bottom-left of the trigger point. Note: Right clicking the menu does not work.`,
    },
    {
      attribute: 'lvDropdownItemClickClose',
      type: 'boolean',
      default: 'true',
      description: `菜单项点击后是否关闭下拉菜单，默认点击后关闭。`,
      description_en: `Whether to close the drop-down menu after clicking the menu item, which is set to Yes by default`,
    },
    {
      attribute: 'lvDropdownPanelClass',
      type: 'string',
      default: '--',
      description: `下拉面板的样式。`,
      description_en: `Style of the dropdown panel.`,
    },
    {
      attribute: 'lvDropdownDisabled',
      type: 'boolean',
      default: 'false',
      description: `是否禁用下拉菜单。`,
      description_en: `Whether to disable dropdown.`,
    },
    {
      attribute: 'lvDropdownSize',
      type: 'large | default',
      default: 'default',
      description: `下拉菜单的尺寸。`,
      description_en: `Size of the dropdown.`,
    },
    {
      attribute: 'lvDropdownBeforeOpen',
      type: 'fn',
      default: '',
      description: '打开下拉面板前的回调函数，执行异步事件时，返回值为false可阻止打开。',
      description_en: 'The callback function before the drop-down panel is opened. When an asynchronous event is executed, the return value is false to prevent the drop-down panel from being opened.',
    }
  ],
  event: [
    {
      event: 'lvDropdownShow',
      parameter: `--`,
      description: '打开下拉菜单的回调函数。',
      description_en: 'Callback function for opening the drop-down menu.',
    },
    {
      event: 'lvDropdownHide',
      parameter: `--`,
      description: '关闭下拉菜单的回调函数。',
      description_en: 'Callback function for closing the drop-down menu.',
    },
    {
      event: 'lvDropdownItemClick',
      parameter: `data`,
      description: '菜单项点击的回调函数。如果 menuItem 配置了 onClick 事件，单击时不会执行该回调函数。',
      description_en: `The callback function for a menu item click. If the 'onclick' event is configured for MenuItem, the lvDropdownItemClick function is not executed when you click.`,
    },
  ],
};
